<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2024/4/18
  Time: 23:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <title>首页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div class="main-wrapper">
    <div class="sidebar-wrapper">
        <%@include file="components/sidebar.html" %>
    </div>
    <div class="main-container">
        <%@include file="components/navbar.html" %>
        <div class="app-container" id="main-app">
            <div class="notice-box">
                <span class="divide-bar"></span>
                <span style="padding: 1vw 0;">
                    <span class="notice-content">{{notice.content}}</span>
                    <div style="text-indent: 0em;">
                        <span class="notice-content">来自:{{notice.adminName}}</span>
                        <span class="notice-content">时间:{{notice.datetime}}</span>
                    </div>
                </span>
            </div>
            <hr style="border: 0; border-top: 1px solid #eee">
            <div class="comment-box">
                <div class="sub-route-title-box">
                    <span class="divi-line"></span>
                    <span class="title">我的消息</span>
                </div>
                <div style="box-sizing: border-box; width: 98%;">
                    <el-collapse v-model="activeName" accordion>
                        <el-collapse-item v-for="item in userMessage" :key="item.id" :name="item.id">
                            <template slot="title">
                                <i class="header-icon el-icon-info"></i><span style="margin-left: 0.5vw">{{msgMap[item.status]}}</span>
                            </template>
                            <div>尊敬的用户您好：</div>
                            <div style="text-indent: 2em">
                                <span>{{'编号为 '+getNo(item.appointmentId)+' 的预约'}}</span>
                                <span v-show="item.status == 'cancelled'">{{'已被取消，若非本人操作，请及时与医生或工作人员沟通'}}</span>
                                <span v-show="item.status == 'pending'">{{'的预约时间已从'+item.oldDate+'变更至'+item.newDate}}</span>
                                <span v-show="item.status == 'confirmed'">{{'已完成问诊，请凭挂号编号前往药房取药'}}</span>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                    <el-empty description="暂时没有消息.." v-show="this.userMessage.length == 0"
                              :image-size="80"></el-empty>
                </div>
            </div>


            <hr style="border: 0; border-top: 1px solid #eee">
            <div class="comment-box">
                <div class="sub-route-title-box">
                    <span class="divi-line"></span>
                    <span class="title">留言板</span>
                </div>
                <div class="btn-box">
                    <el-button type="primary" plain size="medium" @click="commentDialogFlag = true">去留言</el-button>
                </div>
                <div style="box-sizing: border-box; width: 98%;">
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :header-cell-style="{
                    'background-color': '#f8f8f9',
                    'color': '#000',
                    'font-weight': '600',
                    'text-align': 'center'
                }"
                            :cell-style="{ 'text-align': 'center' }">
                        <el-table-column
                                type="index"
                                label="#"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="message"
                                label="内容">
                        </el-table-column>
                        <el-table-column
                                prop="createdAt"
                                label="日期"
                                width="260">
                        </el-table-column>
                    </el-table>
                </div>

                <div class="pagination-box">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="10"
                            :current-page="page"
                            @current-change="handleCurrentChange">
                    </el-pagination>
                </div>

                <el-dialog title="提交留言" :visible.sync="commentDialogFlag">
                    <el-form :model="form" :rules="rules" ref="form">
                        <el-form-item label="留言内容" style="margin-left: 1.5vw;" prop="content">
                            <el-input v-model="form.content" autocomplete="off" style="width: 85%;"></el-input>
                        </el-form-item>
                        <el-form-item label="是否公开" prop="public"
                                      style="display: flex; align-items: center; margin-left: 1.5vw;">
                            <el-switch v-model="form.public"></el-switch>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="commentDialogFlag = false">取 消</el-button>
                        <el-button type="primary" @click="submitForm()">确 定</el-button>
                    </div>
                </el-dialog>

            </div>
        </div>
    </div>
</div>
<!-- import Vue before Element -->
<script src="assets/js/vue.js"></script>
<!-- import JavaScript -->
<script src="assets/js/axios.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    new Vue({
        el: '#main-app',
        data: function () {
            return {
                patient: false,
                msgMap: {
                    'cancelled': '预约取消通知',
                    'pending': '挂号改约通知',
                    'confirmed': '问诊完成通知',
                },
                activeName: '',
                notice: "",
                total: 10,
                page: 1,
                visible: false,
                commentDialogFlag: false,
                form: {
                    content: '',
                    public: true
                },
                rules: {
                    content: [
                        {required: true, message: '请输入留言内容', trigger: 'blur'},
                        {min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur'}
                    ],
                    public: [
                        {required: true}
                    ]
                },
                formLabelWidth: '120px',
                userMessage: [],
                tableData: [
                    {
                        message: '服务态度不好，希望能改进',
                        name: '张三',
                        createdAt: '2024-4-20 14:00:00'
                    },
                    {
                        message: '预约方便多了，很好',
                        name: '王五',
                        createdAt: '2024-3-10 11:20:00'
                    },
                    {
                        message: '预约方便多了，很好，预约方便多了，很好',
                        name: '赵四',
                        createdAt: '2024-2-15 09:10:00'
                    }
                ]
            }
        },
        methods: {
            getMessages(page) {
                axios.post('MessageServlet', {
                    pageNumber: page
                })
                    .then(response => {
                        console.log('MessageServlet', response);
                        if (response.data.status == 200) {
                            this.tableData = response.data.data
                            this.tableData.forEach((value, index) => {
                                let date = new Date(value.createdAt)
                                value.createdAt = date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
                            }) //将时间戳转化成字符串
                            // window.location = "login.html"
                        } else {
                            // ELEMENT.Message.error('修改失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        ELEMENT.Message.error('未知错误，请联系管理员');
                    });
            },
            getUserMessages(id) {
                let params = {
                    userId: id
                }
                axios.get('RescheduleServlet', {params})
                    .then(response => {
                        console.log('RescheduleServlet', response);
                        if (response.data.status == 200) {
                            let tmp = response.data.data
                            tmp.forEach((value, index) => {
                                let date = new Date(value.createdAt)
                                value.createdAt = date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
                            }) //将时间戳转化成字符串
                            // window.location = "login.html"
                            this.userMessage = tmp.slice(0, 4)
                        } else {
                            // ELEMENT.Message.error('修改失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        ELEMENT.Message.error('未知错误，请联系管理员');
                    });
            },
            handleCurrentChange(page) {
                this.page = page;
                this.getMessages(this.page)
            },
            submitForm() {
                this.$refs['form'].validate(valid => {
                    if (!valid) return
                    let data = {
                        userId: JSON.parse(localStorage.getItem('user')).id,
                        message: this.form.content,
                        createdAt: new Date(),
                        power: this.form.public ? 1 : 0
                    }
                    axios.put('MessageServlet', data)
                        .then(response => {
                            console.log(response);
                            if (response.data.status == 200) {
                                this.commentDialogFlag = false
                                this.form.content = ''
                                this.form.public = true
                                this.getMessages(1);
                                ELEMENT.Message({
                                    message: '提交成功！',
                                    type: 'success'
                                });

                                // window.location = "login.html"
                            } else {
                                ELEMENT.Message.error('提交失败');
                            }
                        })
                        .catch(error => {
                            console.log(error);
                            ELEMENT.Message.error('未知错误，请联系管理员');
                        });
                })
            },
            getNo(id) {
                let formattedId = id.toString().padStart(8, '0');
                return formattedId;
            },
        },
        created() {
            let data = {}
            axios.get('MessageServlet', data)
                .then(response => {
                    console.log('MessageServlet', response);
                    if (response.data.status == 200) {
                        this.total = response.data.data * 10
                        // window.location = "login.html"
                    } else {
                        // ELEMENT.Message.error('修改失败');
                    }
                })
                .catch(error => {
                    console.log(error);
                    ELEMENT.Message.error('未知错误，请联系管理员');
                });
            // 默认一开始请求页数是第一页
            this.getMessages(1)
            this.getUserMessages(JSON.parse(localStorage.getItem('user')).id);
            axios.get('NoticeServlet',)
                .then(response => {
                    console.log('NoticeServlet', response);
                    if (response.data.status == 200) {
                        this.notice = response.data.data
                        let date = new Date(this.notice.datetime)
                        this.notice.datetime = date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
                    } else {
                        // ELEMENT.Message.error('修改失败');
                    }
                })
                .catch(error => {
                    console.log(error);
                    ELEMENT.Message.error('未知错误，请联系管理员');
                });
        }
    })

</script>
<style>
    @import "assets/css/base.css";

    .main-wrapper {
        width: 100%;
        height: 100vh;
        display: flex;
    }

    .main-wrapper .sidebar-wrapper {
        width: 15vw;
        height: 100vh;
        position: fixed;
        left: 0;
    }

    .main-wrapper .main-container {
        margin-left: 15vw;
        width: 85vw;
        height: 100vh;
    }

    .main-container .app-container {
        width: 100%;
        padding: 1.5vw 1.5vw;
        box-sizing: border-box;
    }

    .main-container .app-container .notice-box {
        display: flex;
        justify-content: start;
        margin-bottom: 2vw;
    }

    .main-container .app-container .notice-box .divide-bar {
        width: 5px;
        background-color: #409EFF;
        margin-right: 1vw;
    }

    .main-container .app-container .notice-box .notice-content {
        padding: 1vw 1vw 1.5vw;
        line-height: 1.5;
    }

    .main-container .app-container .comment-box {
        display: flex;
        flex-direction: column;
        margin-top: 2vw;
    }

    .main-container .app-container .comment-box .box-title {
        font-size: 1.2vw;
        font-weight: 600;
    }

    .sub-route-title-box {
        display: flex;
        justify-content: start;
        padding: 1vw 0 0.5vw;
    }

    .sub-route-title-box .divi-line {
        display: inline-block;
        width: 3px;
        height: 1.2vw;
        background-color: #409EFF;
    }

    .sub-route-title-box .title {
        padding-left: 1vw;
        margin-left: -2px;
        font-size: 1.2vw;
        /*color: #808080;*/
    }

    .main-container .app-container .comment-box .btn-box {
        margin: 1.5vw 0 0.5vw;
    }

    .main-container .app-container .comment-box .pagination-box {
        display: flex;
        justify-content: center;
        padding: 1vw;
    }
</style>
</body>
</html>
